<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <!--<el-form-item label="包名" prop="bagName">
        <el-input
          v-model="queryParams.bagName"
          placeholder="请输入包名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="标注人员" prop="markStaff">
        <el-input
          v-model="queryParams.markStaff"
          placeholder="请输入标注人员"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="质检人员" prop="checkStaff">
        <el-input
          v-model="queryParams.checkStaff"
          placeholder="请输入质检人员"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="预计发起验收日期" prop="expCheckDate">
        <el-input
          v-model="queryParams.expCheckDate"
          placeholder="请输入预计发起验收日期"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="实际发起验收日期" prop="realCheckDate">
        <el-input
          v-model="queryParams.realCheckDate"
          placeholder="请输入实际发起验收日期"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="预计验收通过时间" prop="passCheckDate">
        <el-input
          v-model="queryParams.passCheckDate"
          placeholder="请输入预计验收通过时间"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="第1帧是否完成" prop="firstFinishOr">
        <el-input
          v-model="queryParams.firstFinishOr"
          placeholder="请输入第1帧是否完成"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="第1帧是否通过" prop="firstPassOr">
        <el-input
          v-model="queryParams.firstPassOr"
          placeholder="请输入第1帧是否通过"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="当前标注进度" prop="markProgress">
        <el-input
          v-model="queryParams.markProgress"
          placeholder="请输入当前标注进度"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="总帧数" prop="totalFrames">
        <el-input
          v-model="queryParams.totalFrames"
          placeholder="请输入总帧数"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="当前标注状态" prop="markState">
        <el-input
          v-model="queryParams.markState"
          placeholder="请输入当前标注状态"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="清研质检" prop="qyyChecker">
        <el-input
          v-model="queryParams.qyyChecker"
          placeholder="请输入清研质检"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="任务ID" prop="taskId">
        <el-input
          v-model="queryParams.taskId"
          placeholder="请输入任务ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>-->

      <el-col :span="6">
        <el-form-item prop="taskId">
          <treeselect
            size="small"
            v-model="queryParams.taskId"
            :options="qaTaskOptions"
            :normalizer="normalizer"
            placeholder="选择上级任务"
          />
        </el-form-item>
      </el-col>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['mark:progress:add']"
          >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['mark:progress:edit']"
          >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['mark:progress:remove']"
          >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['mark:progress:export']"
          >导出
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="progressList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!--<el-table-column label="主键ID" align="center" prop="planId"/>-->
      <el-table-column label="包名" align="center" prop="bagName" />
      <el-table-column label="标注人员" align="center" prop="markStaff" />
      <el-table-column label="质检人员" align="center" prop="checkStaff" />
      <el-table-column label="预计发起验收日期" align="center" prop="expCheckDate" />
      <el-table-column label="实际发起验收日期" align="center" prop="realCheckDate" />
      <el-table-column label="预计验收通过时间" align="center" prop="passCheckDate" />
      <el-table-column label="第1帧是否完成" align="center" prop="firstFinishOr" :formatter="convertFinishState" />
      <el-table-column label="第1帧是否通过" align="center" prop="firstPassOr" :formatter="convertPassState" />
      <el-table-column label="当前标注进度" align="center" prop="markProgress" :formatter="convertProState" />
      <el-table-column label="总帧数" align="center" prop="totalFrames" />
      <el-table-column label="当前标注状态" align="center" prop="markState" :formatter="convertMarkState" />
      <el-table-column label="清研质检" align="center" prop="qyyChecker" />
      <!--<el-table-column label="任务ID" align="center" prop="taskId"/>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['mark:progress:edit']"
            >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['mark:progress:remove']"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改【请填写功能名称】对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="包名" prop="bagName">
          <el-input v-model="form.bagName" placeholder="请输入包名" />
        </el-form-item>
        <el-form-item label="标注人员" prop="markStaff">
          <el-input v-model="form.markStaff" placeholder="请输入标注人员" />
        </el-form-item>
        <el-form-item label="质检人员" prop="checkStaff">
          <el-input v-model="form.checkStaff" placeholder="请输入质检人员" />
        </el-form-item>
        <el-form-item label="预计发起验收日期" prop="expCheckDate">
          <el-date-picker v-model="form.expCheckDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
          <!--<el-input v-model="form.expCheckDate" placeholder="请输入预计发起验收日期"/>-->
        </el-form-item>
        <el-form-item label="实际发起验收日期" prop="realCheckDate">
          <el-date-picker v-model="form.realCheckDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
          <!--<el-input v-model="form.realCheckDate" placeholder="请输入实际发起验收日期"/>-->
        </el-form-item>
        <el-form-item label="预计验收通过时间" prop="passCheckDate">
          <el-date-picker v-model="form.passCheckDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
          <!--<el-input v-model="form.passCheckDate" placeholder="请输入预计验收通过时间"/>-->
        </el-form-item>
        <el-form-item label="第1帧是否完成" prop="firstFinishOr">
          <!--<el-input v-model="form.firstFinishOr" placeholder="请输入第1帧是否完成"/>-->
          <el-select v-model="form.firstFinishOr" placeholder="请选择">
            <el-option v-for="item in finishOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="第1帧是否通过" prop="firstPassOr">
          <!--<el-input v-model="form.firstPassOr" placeholder="请输入第1帧是否通过"/>-->
          <el-select v-model="form.firstPassOr" placeholder="请选择">
            <el-option v-for="item in passOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前标注进度" prop="markProgress">
          <!--<el-input v-model="form.markProgress" placeholder="请输入当前标注进度"/>-->
          <el-select v-model="form.markProgress" placeholder="请选择">
            <el-option v-for="item in proOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="总帧数" prop="totalFrames">
          <el-input v-model="form.totalFrames" placeholder="请输入总帧数" />
        </el-form-item>
        <el-form-item label="当前标注状态" prop="markState">
          <!--<el-input v-model="form.markState" placeholder="请输入当前标注状态"/>-->
          <el-select v-model="form.markState" placeholder="请选择">
            <el-option v-for="item in markOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="清研质检" prop="qyyChecker">
          <el-input v-model="form.qyyChecker" placeholder="请输入清研质检" />
        </el-form-item>
        <!--<el-form-item label="任务ID" prop="taskId">
          <el-input v-model="form.taskId" placeholder="请输入任务ID"/>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listProgress,
  getProgress,
  delProgress,
  addProgress,
  updateProgress,
  exportProgress,
} from '@/api/mark/progress'

import { treeselect } from '@/api/mark/qaTask'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'Progress',
  components: {
    Treeselect,
  },
  data() {
    return {
      // 选中数组
      ids: [],
      // 遮罩层
      loading: true,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表格数据
      progressList: [],
      // 任务选项
      qaTaskOptions: [],
      // 第一帧完成状态
      finishOptions: [
        {
          value: '0',
          label: '未完成',
        },
        {
          value: '1',
          label: '已完成',
        },
      ],
      // 第一帧通过状态
      passOptions: [
        {
          value: '0',
          label: '未通过',
        },
        {
          value: '1',
          label: '已通过',
        },
      ],
      // 标注进度状态
      proOptions: [
        {
          value: '0',
          label: '未完成',
        },
        {
          value: '1',
          label: '已完成',
        },
      ],
      // 标注状态选项
      markOptions: [
        {
          value: '0',
          label: '通过',
        },
        {
          value: '1',
          label: '待定',
        },
        {
          value: '2',
          label: '等待返修',
        },
        {
          value: '3',
          label: '客户返修',
        },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        /*bagName: undefined,
        markStaff: undefined,
        checkStaff: undefined,
        expCheckDate: undefined,
        realCheckDate: undefined,
        passCheckDate: undefined,
        firstFinishOr: undefined,
        firstPassOr: undefined,
        markProgress: undefined,
        totalFrames: undefined,
        markState: undefined,
        qyyChecker: undefined,*/
        taskId: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        bagName: [{ required: true, message: '包名不能为空', trigger: 'blur' }],
        taskId: [{ required: true, message: '任务ID不能为空', trigger: 'blur' }],
        createTime: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
        createBy: [{ required: true, message: '创建者不能为空', trigger: 'blur' }],
        updateTime: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }],
        updateBy: [{ required: true, message: '更新者不能为空', trigger: 'blur' }],
      },
    }
  },
  created() {
    /*this.getList()*/
    treeselect().then((response) => {
      this.qaTaskOptions = this.handleTree(response.data, 'taskId')
      this.loading = false
    })
  },
  methods: {
    /** 转换验收任务数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.taskId,
        label: node.taskName,
        children: node.children,
      }
    },
    convertFinishState(row) {
      if (row.firstFinishOr == 0) {
        return '未完成'
      } else if (row.firstFinishOr == 1) {
        return '已完成'
      } else {
        return row.firstFinishOr
      }
    },
    convertPassState(row) {
      if (row.firstPassOr == 0) {
        return '未通过'
      } else if (row.firstPassOr == 1) {
        return '已通过'
      } else {
        return row.firstPassOr
      }
    },
    convertProState(row) {
      if (row.markProgress == 0) {
        return '未完成'
      } else if (row.markProgress == 1) {
        return '已完成'
      } else {
        return row.markProgress
      }
    },
    convertMarkState(row) {
      if (row.markState == 0) {
        return '通过'
      } else if (row.markState == 1) {
        return '待定'
      } else if (row.markState == 2) {
        return '等待返修'
      } else if (row.markState == 3) {
        return '客户返修'
      } else {
        return row.markState
      }
    },
    /** 查询【请填写功能名称】列表 */
    getList() {
      if (this.queryParams.taskId) {
        this.loading = true
        listProgress(this.queryParams).then((response) => {
          this.progressList = response.rows
          this.total = response.total
          this.loading = false
        })
      } else {
        alert('请选择上级任务或输入任务名称')
      }
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        planId: undefined,
        bagName: undefined,
        markStaff: undefined,
        checkStaff: undefined,
        expCheckDate: undefined,
        realCheckDate: undefined,
        passCheckDate: undefined,
        firstFinishOr: undefined,
        firstPassOr: undefined,
        markProgress: undefined,
        totalFrames: undefined,
        markState: undefined,
        qyyChecker: undefined,
        taskId: undefined,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.planId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      if (this.queryParams.taskId) {
        this.reset()
        this.open = true
        this.title = '添加进度记录'
      } else {
        alert('请选择上级任务或输入任务名称')
      }
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const planId = row.planId || this.ids
      getProgress(planId).then((response) => {
        this.form = response.data
        this.open = true
        this.title = '修改进度记录'
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.planId != undefined) {
            updateProgress(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess('修改成功')
                this.open = false
                this.getList()
              } else {
                this.msgError(response.msg)
              }
            })
          } else {
            this.form.taskId = this.queryParams.taskId
            addProgress(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess('新增成功')
                this.open = false
                this.getList()
              } else {
                this.msgError(response.msg)
              }
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const planIds = row.planId || this.ids
      this.$confirm('是否确认删除ID为"' + planIds + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return delProgress(planIds)
        })
        .then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        })
        .catch(function () {})
    },
    /** 导出按钮操作 */
    handleExport() {
      if (this.queryParams.taskId) {
        const queryParams = this.queryParams
        this.$confirm('是否确认导出所有数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(function () {
            return exportProgress(queryParams)
          })
          .then((response) => {
            // alert(Object.keys(response))
            this.download(response.msg)
          })
          .catch(function () {})
      } else {
        alert('请选择上级任务或输入任务名称')
      }
    },
  },
}
</script>
